<template>
  <div class="personalNav">
      <ul>
          <li style="margin-top:80px;">
              <img :src="personal" alt="">
              <a href="javascript:;" @click="mypage">我的主页</a>
          </li>
          <li>
              <img :src="lock" alt="">
              <a href="javascript:;" @click="changepwd">修改密码</a>
          </li>
      </ul>
    <myPage v-if="index==0"></myPage>
    <changePwd v-if="index==1"></changePwd>
  </div>
</template>
<script>
const img1 = require("../../assets/img/个人中心/切图/9.png")
const img2 = require("../../assets/img/个人中心/切图/10.png")
const img3 = require("../../assets/img/个人中心/切图/12.png")
const img4 = require("../../assets/img/个人中心/切图/13.png")
import myPage from './myPage.vue';
import changePwd from './changePwd.vue';
export default {
    data(){
        return {
            index:0,
            personal:img1,
            lock:img2
        }
    },
    methods:{
        mypage(){
            this.index = 0
            this.personal = img1
            this.lock = img2
        },
        changepwd(){
            this.index = 1
            this.personal = img3
            this.lock = img4
        }
    },
    components:{
        myPage,
        changePwd
    }
};
</script>
<style scoped>
    ul{
        width:200px;
        height: 510px;
        background: #F8F9FD;
        float:left;
    }
    ul li{
        width:100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    ul li a{
        margin-left: 20px;
        font-size: 18px;
        color:rgb(34, 34,34 );
    }
</style>


